<template>
	<dialog01 :width="'70%'" :centerDialogVisible="centerDialogVisible" :headertitle="headertitle" :title="''"
		@cancel="cancel(false)">
		<div slot="content-one">
			<slot name="content"></slot>
			<el-upload action="/" list-type="picture-card" :multiple="true" :auto-upload="false" :on-change="handleChange"
				:file-list="fileList" :show-file-list="true" :on-preview="handlePictureCardPreview" :on-remove="handleRemove"
				ref="myupload">
				<i class="el-icon-plus avatar-uploader-icon"></i>
			</el-upload>
			<div style="text-align: center;">
				<el-button type='primary' @click="pcompressImg()">确定</el-button>
			</div>
			<!-- 图片放大预览 -->
			<imgViewer :imgkey="'url'" :imglist="imgList" ref="myimgViewer"></imgViewer>
		</div>
	</dialog01>
</template>

<script>
	import {
		compressImg
	} from '@/lib/utils/utils';
	export default {
		name: "imgMultUpload",
		meta: {
			descr: "多图片上传"
		},
		props: {
			// 显示图片 
			centerDialogVisible: {
				default: false
			},
			// 文件类型
			fileType: {
				default: ''
			},
			imgKey: {
				default: ''
			},
			list: {
				default: []
			},
			headertitle: {
				default: null
			},
			uploadSize: {
				default: 100
			}
		},
		computed: {
			fileList() {
				let that = this;
				if (this.imgKey) {
					return this.list.map(i => ({
						url: item[this.imgKey]
					}))
				} else {
					return this.list.map(i => ({
						url: item
					}))
				}
			}
		},
		data() {
			return {
				showVisible: "",
				imgList: [],
				seq: 0,
				loading: null
			};
		},
		methods: {
			cancel(d) {
				this.$emit('cancel', false);
			},
			//图片移除
			handleRemove(file, fileList) {
				this.imgList = fileList;
			},
			//文件监听
			handleChange(file, fileList) {
				this.imgList = fileList;
				let isLt2M = file.size / 1024 / 1024 < this.uploadSize;
				if (!isLt2M) {
					this.$toast('上传图片大小不能超过' + this.uploadSize + 'M!');
					this.$refs.myupload.uploadFiles.splice(fileList.length - 1, 1);
				}
			},
			//图片预览
			handlePictureCardPreview(file) {
				this.$refs.myimgViewer.showImg();
			},
			// 确定上传
			pcompressImg() {
				let result = this.imgList.filter(i => i.status === 'ready');
				if (result.length === 0) {
					this.saveUploadImg();
				} else {
					this.seq = result.length;
					this.imgList.forEach(item => {
						if (item.status === "ready") {
							compressImg(item.raw, that, (res, e) => {
								item.raw = res.file;
								e.seq--;
								if (e.seq === 0) {
									this.saveUploadImg();
								}
							});
						}
					})
				}
			},
			// 确定上传
			saveUploadImg() {
				let formData = new FormData();
				this.imgList.forEach(item => {
					if (item.status === "ready") {
						formData.append('files', item.raw, item.raw.name);
					}
				});
				if (this.fileType) {
					formData.append('fileType', this.fileType);
				};

				// that.$axios.post("/Edison/common/file/uploadOSS", formData, false).then(res => {
				// 	let arrayList = new Array();
				// 	that.$lodash.forEach(that.imgList, function(item) {
				// 		if (item.status === "success") {
				// 			arrayList.push(item.url);
				// 		}
				// 	});
				// 	if (res.data.code === 0 && res.data.data.length > 0) {
				// 		that.$lodash.forEach(res.data.data, function(item) {
				// 			arrayList.push(item);
				// 		});
				// 	}
				// 	that.$emit('input', arrayList);
				// 	that.$emit('finish');
				// 	that.loading.close();
				// });
			}
		},
		created() {}
	};
</script>